<template>
  <div class="login-app">
    <div class="login-bg"></div>
    <div class="login-main">
      <h2>系统登录</h2>
      <el-form
        :model="loginBtn"
        :rules="rules"
        ref="loginBtn"
        label-width="100px"
      >
        <el-form-item prop="account">
          <el-input
            type="text"
            autocomplete="off"
            v-model="loginBtn.account"
            placeholder="请输入账号"
            prefix-icon="el-icon-user-solid"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            autocomplete="off"
            v-model="loginBtn.password"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loginBtns">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { checkLogin } from "../../api/user.js";
export default {
  data() {
    return {
      loginBtn: {
        account: "",
        password: "",
      },
      rules: {
        //账号
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        //密码
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 10,
            message: "长度在 6 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    loginBtns() {
      this.$refs.loginBtn.validate(async(item) => {
        if (item) {
          let res = await checkLogin(this.loginBtn);
          console.log(res);
          let { code, msg, token, role } = res;
          localStorage.setItem("t_k", token);
          if(code==0){
            this.$message({
            message: msg,
            type: 'success'
            })
            this.$router.push('/')
          }else{
             this.$message.error(msg);
          }
    }else{
      console.log('成功');

    }

      });
    }
  }
}

</script>

<style lang="less" scoped>
.login-app {
  width: 100%;
  height: 270px;
  .login-bg {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: url("../../assets/imgs/bg.jpg") no-repeat center;
    background-size: cover;
    filter: blur(8px);
  }
  .login-main {
    position: fixed;
    top: 30%;
    left: 100px;
    // width: 450px;
    height: 260px;
    background-color: white;
    border-radius: 10px;
    padding-right: 100px;
    h2 {
      margin: 15px 0;
      text-align: center;
    }
  }
}
/deep/.el-input__inner{
  width: 300px;
}
/deep/.el-button--primary{
  background-color:#59bcad ;
  border-color: #59bcad;
}
</style>